<template>
	<view
	class="container" 
	:style="{
		background: isGrayFilter
			? 'url(' +
				$setting.imageUrl() +
				'index_haed_gray.png' +
				') no-repeat'
			: 'url(' +
				$setting.imageUrl() +
				'index_haed.png' +
				') no-repeat',
		backgroundSize: '100% 444rpx',
		backgroundColor: '#F6F6F6',
	}">
		<view 
		class="navTop" 
		:style="{
			background: isGrayFilter
				? 'url(' +
					$setting.imageUrl() +
					'index_haed_gray.png' +
					') no-repeat'
				: 'url(' +
					$setting.imageUrl() +
					'index_haed.png' +
					') no-repeat',
			backgroundSize: '100% 300rpx'
		}" 
		>
			<u-navbar 
			title=" " 
			:background="{ background: 'transparent' }" 
			:border-bottom="false" 
			:is-back="false"
			:height="55" 
			:showtitle="false" 
			:isGrayFilter="isGrayFilter"
			>
				<view class="navbar-bglist"
				:class="{ is_gray: isGrayFilter, 'navbar-bglist-z': hideLogo == 1 }"
				:style="{ opacity: hideLogo, }"
                >
					<view class="flex">
						<image class="logo" :src="$setting.imageUrl()+'index_logo_c.png'" mode="heightFix"></image>
					</view>
					<view class="navbar-rightside">
						<view class="navbar-txt" @click="jump('/pages/index/selectcity')">
							<view class="nav-in-txt">{{vuex_address==''?maplocation.city==''?'正在获取您的定位':maplocation.city:vuex_address}}</view>
							<u-icon class="nav-in-icon" name="arrow-right" size="24rpx" color="#fff"></u-icon>
						</view>
						<view class="navbar-time" v-if="businesshoursCity">
							<text v-if="businesshoursCity.supplier.business_status==1" class="nav-in-txt">营业时间：{{businesshoursCity.businesshours}}</text>
							<text v-else class="nav-in-txt">{{businesshoursCity.supplier.business_status_text}}</text>
						</view>
					</view>
				</view>

				<view class="products-box" :class="hideLogo==0?'navbar-bglist-z':''"  :style="{ opacity: hideSear }">
					<u-search placeholder="搜索商品" :show-action="false" v-model="keyword" disabled @click="jump('/pages/categoty/product/search')"></u-search>
				</view>

			</u-navbar>
		</view>
		
		<skeleton v-if="loading"></skeleton>
		<view v-else :class="{ is_gray: isGrayFilter }">
			<u-search class="index-scoll-search" placeholder="搜索商品" :show-action="false" v-model="keyword" disabled @click="jump('/pages/categoty/product/search')"></u-search>
			<view class="m-top index-scroll-view">
				<diy style="position: relative;" :seckillProduct="seckillProduct" :seckillTop="seckillTop" :assembleProduct="assembleProduct" :assembleTop="assembleTop" :bargainTop="bargainTop" :bargainProduct="bargainProduct"  :diyItems="items" :userInfo="userInfo" :showNewCustomArea="showNewCustomArea" :newCouponLists="newCouponLists" :newCustomGoods="newCustomGoods" :handleShowNewCustom="handleShowNewCustom" :couponLists="couponList" @handleCoupon="handleCoupon"></diy>
			</view>
			<!-- <view class="swiper">
				<u-swiper :list="bannerList" name="image" height="320" border-radius="24" @click="handleSwiper"></u-swiper>
			</view> -->

			<!-- <view class="notice bg-fff" v-if="noticeList.length > 0">
				<view class="notice-item flex-align-center" @click="noticeShow = true">
					<image class="notice-item-image" :src="noticeList[0].image"></image>
					<view class="notice-item-name u-line-1">公告栏： {{noticeList[0].name}}</view>
				</view>
			</view> -->
			
			<!-- <view class="notice bg-fff"> -->
				<!-- <swiper circular vertical :indicator-dots="false" :autoplay="true"> -->
				<!-- <swiper-item v-for="(item,index) in noticeList" :key="index"> -->
				<!-- <view class="notice-item flex-align-center">
					<image :src="$setting.imageUrl()+'static/19.gif'" class="notice-img" mode="widthFix"></image>
				</view> -->
				<!-- </swiper-item> -->
				<!-- </swiper> -->
			<!-- </view> -->
			
			<!-- <NewCustomInIndex v-if="userInfo.newPeople" :userInfo="userInfo" :showNewCustom="showNewCustomArea" :couponLists="newCouponLists" :newCustomGoods="newCustomGoods" @hideCouponModal="handleShowNewCustom"></NewCustomInIndex> -->
			<!-- <view class="active flex-space-between" v-if="seckillProduct.length > 0 || assembleProduct.length > 0">
				<view class="active-item bg-fff" @click="jump('/pages/active/seckill/seckill')"
					v-if="seckillProduct.length > 0">
					<view class="active-item-title">秒杀专区</view>

					<view class="active-item-product flex-align-center">
						<view class="flex-column-center active-item-seckill" v-for="(item,index) in seckillProduct"
							:key="index" v-if="index < 2">
							<image class="active-item-product-image" :src="item.product.file_path"></image>
							<view class="active-item-product-price flex-center"
								:style="{background: 'url('+$setting.imageUrl()+'seckill_price_bg.png) no-repeat', backgroundSize: '136rpx 48rpx'}">
								￥{{item.seckill_price}}</view>
						</view>
						<view v-if="seckillProduct.length == 1"></view>
					</view>
				</view>
				<view class="active-item bg-fff" @click="jump('/pages/active/assemble/assemble')"
					v-if="assembleProduct.length > 0">
					<view class="active-item-title">拼团专区</view>
					<view class="active-item-product flex-align-center">
						<view class="flex-column-center active-item-assemb" v-for="(item,index) in assembleProduct"
							:key="index" v-if="index < 2">
							<image class="active-item-product-image" :src="item.product.file_path"></image>
							<view class="active-item-product-name u-line-1">{{item.product.product_name}}</view>
						</view>
						<view v-if="assembleProduct.length == 1"></view>
					</view>
				</view>
			</view> -->

			<!-- <view class="coupon bg-fff flex-space-between" v-if="couponList.length > 0">
				<view class="coupon-list flex-space-between">
					<scroll-view scroll-x="true" style="white-space: nowrap;width: 620rpx;">
						<view>
							<view class="coupon-item" v-for="(item,index) in couponList" :key="index" @click="handleCoupon(item)">
								<image :src="item.is_receive ? item.image_get : item.image"></image>
							</view>
						</view>
					</scroll-view>
					
				</view>

				<u-icon name="arrow-right" size="40rpx" color="#999999"></u-icon>
				
			</view> -->

			<!-- <view class="brand bg-fff">

				<view class="brand-list flex-wrap">
					<view class="brand-item flex-column-center" v-for="(item,index) in brandList" :key="index" @click="gojump(item.access_url)">
						<image class="brand-list-image" :src="item.image" mode="aspectFit"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
			</view> -->
			
			<view class="product">
				<view class="tabsBox___s recommendTabBar" :class="Ceiling?'tabStik':''" :style="{ top: navTopHeight +'px'}">
					<u-tabs :active-color="$setting.colorTheme()" :active-item-style="{fontSize: '32rpx'}" bar-width="22"
					bg-color="transparent" :list="tabsList" :current="tabsCurrent" @change="tabsChange"></u-tabs>
				</view>
				<view v-for="(tabsitem,tabsindex) in tabsList" :key="tabsindex" v-if="tabsCurrent==tabsindex">
					<view style="min-height: 100px;" :id="'wall_'+tabsindex">
						<helang-waterfall-list :status="waterfall[tabsCurrent].status" :list="waterfall[tabsCurrent].list" :reset="waterfall[tabsCurrent].reset" :isProductLoading="isProductLoading" @click="onClick" @done="onDone" @activityPopupFun="activityPopupFun">
							<template>
								<view v-if="waterfall[tabsCurrent].status == 'await'">
									<view class="load-txt">上拉加载更多</view>
								</view>
								<view v-else-if="waterfall[tabsCurrent].status == 'loading'">
									<view class="load-txt">加载中</view>
									<view style="height: 40px;"></view>
								</view>
								<view v-else-if="waterfall[tabsCurrent].status == 'success'">
									<view class="load-txt">加载中</view>
									<view style="height: 40px;"></view>
								</view>
								<view v-else-if="waterfall[tabsCurrent].status == 'finish'">
									<view class="load-txt">没有更多了</view>
								</view>
								<view v-else-if="waterfall[tabsCurrent].status == 'fail'">
									<view class="load-txt">出错了，请刷新重试</view>
								</view>
								<view v-else-if="waterfall[tabsCurrent].status == 'empty'">
									<view class="load-txt">暂无数据</view>
									<view style="height: 10px;"></view>
								</view>
								<view v-else></view>
							</template>
						</helang-waterfall-list>
					</view>
				</view>
			</view>
			<!-- <view class="product">
				<view class="tabsBox" :class="Ceiling?'tabStik':''" :style="{ top: navTopHeight +'px'}">
					<u-tabs :active-color="$setting.colorTheme()" :active-item-style="{fontSize: '32rpx'}" bar-width="22"
					bg-color="transparent" :list="tabsList" :current="tabsCurrent" @change="tabsChange"></u-tabs>
				</view>
				<view class="product-list flex-space-between flex-wrap">
					<view class="product-item bg-fff" v-for="(item,index) in productList" :key="index">
						<image v-if="item['mark']" class="mark-at-top" :src="item['mark']['icon']"  mode="widthFix" :style="item.mark.position==0?'top:'+item.mark.t_margin+'px; left:'+item.mark.l_margin+'px;':'top:'+item.mark.t_margin+'px; right:'+item.mark.l_margin+'px;'"></image>
						<image class="product-item-image" @click="toDetail(item)" :src="item.product_image"></image>
						<view v-if="item.discount_product_data.activity_type==1" class="seckill-activity">{{quantityDiscount(item.discount_product_data.rebate_json) }}</view>
						<view v-if="item.discount_product_data.activity_type==2" class="seckill-activity">首件{{ item.discount_product_data.first_price }}元 {{ item.discount_product_data.start_buy_num }}件起购</view>
						<view v-if="item.discount_product_data.activity_type==3" class="seckill-activity"><view class="seckill-activity-ele">赠</view>买{{ item.discount_product_data.buy_num }}赠{{ item.discount_product_data.gift_num }}</view>
						<view style="height: 80rpx;" v-if="item.discount_product_data.gift_product_data.file_path">
							<view class="pentagonBox" @click="activityPopupFun(item.discount_product_data)">
								<view class="pentagon">
									<view class="pentagonTxt">买赠活动</view>
								</view>
								<image class="pentagonImage" :src="item.discount_product_data.gift_product_data.file_path"></image>
								<u-icon name="arrow-right" size="20" color="#9ea09a"></u-icon>
							</view>
						</view>
						<view class="product-con" @click="toDetail(item)">
							<view class="product-con-name u-line-2"><span class="product-label" v-if="item['label']">{{item['label']['label_name']}}</span>{{item.product_name}}</view>
							<view class="flex-space-between">
								<view class="product-con-price">
									<view><text>￥</text>{{item.product_sku.product_price}}</view>
									<text>￥{{item.product_sku.line_price}}</text>
								</view>
								<b-u-button-theme width="52rpx" height="40rpx" size="24rpx"
									@click="toDetail(item)">购买</b-u-button-theme>
							</view>
						</view>
					</view>

					<view class="product-item" v-if="productList.length % 2 == 1"></view>
				</view>
			</view> -->
			
			<root-portal>
				<!-- 广告弹窗 -->
				<view class="popup-box">
					<u-popup v-model="advertisement" mode="center" height="910rpx" width="620rpx" border-radius="24" :mask-close-able="false">
						<view class="advertisement-popup" :class="{ is_gray: isGrayFilter }" >
							<view class="advertisement-swiper">
								<u-swiper :list="advertisementList" name="file_path" height="800" border-radius="24" @click="advertisementPage" bg-color="transparent"></u-swiper>
								<!-- <view class="advertisement-txt">广告</view> -->
							</view>
							<view class="advertisement-close">
								<image @click="onAdvertisement()" class="advertisement-image" src="@/static/x.png"></image>  
							</view>
						</view>
					</u-popup>
				</view>
			<!-- 新人专区弹窗 -->
				<!-- <ShowNewCustom @noShow="onShowNewCustom" v-if="userInfo.newPeople" :userInfo="userInfo" :couponLists="newCouponLists" :showNewCustom="showNewCustom" :isGrayFilter="isGrayFilter" @hideCouponModal="handleShowNewCustom"></ShowNewCustom> -->
				<!-- 地区 -->
				<u-popup v-model="joinShow" mode="center" border-radius="16" class="img-popup" closeable @close="onJoinShow()">
					<view class="img-popup-top" :class="{ is_gray: isGrayFilter }">
						<image :src="joinmsg.joinimg" mode="widthFix" class="img-center"></image>
						<view class="img-pp-txt" style="white-space: pre-wrap;" v-for="(jitem,jindex) in joinmsg.jointext" :key="jindex">{{jitem}}</view>
						<view class="img-pp-btn">
							<b-u-button-theme width="280rpx" size="28rpx" v-if="joinmsg.joinphone" @click="callme">诚邀合作</b-u-button-theme>
							<!-- <b-u-button-grey width="220rpx" size="26rpx" @click="joinShow = false">进入【南宁店】</b-u-button-grey> -->
						</view>
					</view>
				</u-popup>
			
				<!-- 公告暂时弃用 -->
				<u-popup v-model="noticeShow" mode="center" border-radius="16" height="900rpx" closeable>
					<view class="notice-popup" :class="{ is_gray: isGrayFilter }">
						<view class="notice-title" v-if='noticeList[0]'>{{noticeList[0].name}}</view>
						<view style="white-space: pre-wrap;" v-if="noticeList[0]">{{noticeList[0].content}}</view>
					</view>
				</u-popup>

				<!-- 赠品活动详情 -->
				<u-popup v-model="activityPopup" mode="bottom" border-radius="24" closeable close-icon="close-circle"
					z-index="11000" close-icon-size="40">
					<view class="popup-service" :class="{ is_gray: isGrayFilter }">
						<view class="popup-service-title">活动详情</view>
						<view class="popup-service-txt" v-if="discountProductData.explain">{{ discountProductData.explain }}</view>
						<view class="popup-service-list">
								<view v-if="discountProductData.gift_product_data" class="product-item flex product-item-gift">
									<image style="width: 100rpx;height: 100rpx;" :src="discountProductData.gift_product_data.file_path"></image>
									<view class="product-item-con flex-column-space-between">
										<view>
											<view class="product-item-name u-line-1">{{discountProductData.gift_product_data.product_name}}</view>
											<!-- <view class="product-item-suk">{{gift_product_data.file.real_name}}</view> -->
										</view>

										<view class="flex-space-between">
											<view class="product-item-num">x{{discountProductData.gift_num}}</view>
											<view class="product-item-price">赠品</view>
										</view>
									</view>
								</view>
						</view>
					</view>
				</u-popup>
			</root-portal>
			<root-portal>
				<BusinessBox 
				:businessshow="checkbusiness"
				:businesstxt="businesstxt" 
				:bottom="0" 
				:isGrayFilter="isGrayFilter"
				></BusinessBox>
			</root-portal>

		</view>
	</view>
</template>

<script>
	import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list"
	// import mockData from '@/uni_modules/helang-waterfall/mock-data/waterfall-list.js'
	import diy from '@/components/diy/diy.vue';
	import skeleton from '../component/skeleton/index.vue';
	import setGrayFilter from '@/common/setIsGrayFilter.js'	
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [setGrayFilter],
		components: {
			skeleton,
			diy,
			helangWaterfallList
		},
		data() {
			return {
				isResetNow: false,
				// 异步请求相关
				ajax: {
					// 是否可以加载
					load: true,
					// 每页的请求条件
					rows: 10,
					// 页码
					page: 1,
					// 数据列表
					dataList: []
				},
				// 瀑布流组件相关
				waterfall: [
					{
						status: "",
						reset: false,
						list: [],
						page:1,
					}
				],
				items: [],
				advertisementList: [],
				advertisement: false,
				showNewCustomArea: false,
				keyword: "",
				bannerList: [],
				noticeList: [],
				seckillProduct: [],
				seckillTop:{},
				assembleTop:{},
				bargainTop: {},
				assembleProduct: [],
				bargainProduct: [],
				couponList: [],
				brandList: [],
				tabsList: [{
					"id": 18,
					"name": "推荐",
					"describe": "111",
					"icon": "",
					"status": 1,
					"sort": 0,
					"shop_supplier_id": 0,
					"app_id": 10001,
					"create_time": "2024-03-21 14:34:52",
					"update_time": "2024-03-21 14:34:52"
				}, ],
				tabsCurrent: 0,
				productList: [],
				productPageForm: {
					recommend: 1,
					category_id: 0,
					list_rows: 40,
				},
				newProPageForm: {
					recommend: 0,
					category_id: 0,
					list_rows: 20,
				},
				noticeShow: false,
				businesshoursCity: '',
				userInfo: {},
				joinShow: false,
				joinmsg: {
					joinimg: '',
					jointext: [],
					joinphone: ''
				},
				// 是否新人专享
				showNewCustom: false,
				// 新人专享优惠券
				newCouponLists: [],
				newCustomGoods: [],
				checkbusiness: true,
				businesstxt: '',
				hideLogo: 1,
				hideSear: 0,
				tabStikTop: 600,
				navTopHeight: 100,
				tabsBoxInitialOffsetTop: 0,
				isRecommendTabBarScroll: false,
				Ceiling: false,
				loading: true,
				share: {
					title: '',
					imageUrl: '',
				},
				activityPopup:false,
				discountProductData:'',
				cityIsChange: false,
				cacheDate:[],
				isProductLoading: false,
			}
		},
		watch:{
			'productList'(){
				// this.waterfall.reset = true;
				
			
				// 设置状态为加载中
				
				// 请求数据， mockData.getList 示例一个 ajax 请求
				// uni.stopPullDownRefresh();''
				// 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
				// this.waterfall.status = 'loading';
				
				if(this.productList.length == 0){
					this.waterfall.reset = true;
				}
				this.waterfall.list = this.productList
				
				this.waterfall.status = 'success';
				// if(this.productList==[]){
				// 	this.waterfall.status = 'finish'
				// }
			},
			maplocation: {
				handler(val, oldVal) {
					// 瀑布流状态下切换城市重新请求
					this.tabsCurrent = 0
					this.productReset()
					this.cityIsChange = true
				},
				deep: true,
				immediate: true,
			},
		},
		computed:{
			...mapState([
				'maplocation',
				'dataloaded',
				'mapaddressid',
				'vuex_showdg',
				'vuex_address',
				'vuex_mapid',
				'vuex_joinShow',
				'vuex_lng',
				'vuex_lat',
				'vuex_shopid',
				'isGrayFilter',
				'vuex_stall_id',
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 110) {
				this.hideLogo = 0
				this.hideSear = 1
			} else {
				this.hideLogo = 1
				this.hideSear = 0
			}
			if (e.scrollTop > this.tabStikTop) {
				this.Ceiling = true
			} else {
				this.Ceiling = false
			}
			if (e.scrollTop > this.tabsBoxInitialOffsetTop) {
				// 切换tab是否要回到顶部
				this.isRecommendTabBarScroll = true
			} else {
				this.isRecommendTabBarScroll = false
			}
		},
		async onLoad(options) {
			
			if (!uni.$u.test.isEmpty(options)) {
				console.log(options, '---options---11')
				let sceneInfo = this.getScene(options.scene);
				console.log(sceneInfo.uid, 'sceneInfo.uid')
				uni.setStorageSync('referee_id', sceneInfo.uid);
				uni.setStorageSync('token', '');
			}
			console.log("referee_id", uni.getStorageSync('referee_id'))
			
			// #ifdef MP-WEIXIN   
			await this.$onLaunched
			// #endif
			if(this.vuex_stall_id>0){
				uni.reLaunch({
					url: '/pages/shop/stall_info'
				})
				return;
			}
			// #ifdef H5  
			this.getLocationGolde();
			// #endif
			
			// console.log('options',options)
			if(this.vuex_joinShow==true){
				this.joinShow = true
				this.$store.commit('ocJoinShow',false);
			}
			this.getElementTop()
			this.getConfigDataDetail()
			this.getHttp();
			this.$nextTick(()=>{
				this.getTabsBoxInitialOffsetTop()
			})
		},
		onShow() {
			if (this.dataloaded) {
				console.log("loaded")
				// this.productReset()
				this.getHttp();
			}
			
		},
		onReady() {
			// this.getList();
		},
		// 触底触发
		onReachBottom() {
			console.log(';触底触发;')
			// 瀑布流
			this.getList();
		},
		methods: {
			
			getLocationGolde() {
			      uni.getLocation({
			        type: 'wgs84', // 返回可以用于uni.openLocation的经纬度
			        success: function (res) {
					  // alert(res.longitude)
						this.vuex_lng = res.longitude;
						this.vuex_lat = res.latitude;
			          // console.log('当前位置的经度：' + res.longitude);
			          // console.log('当前位置的纬度：' + res.latitude);
			        },
			        fail: function (error) {
			          console.error('获取位置失败：', error);
			        }
			      });
			},
			...mapMutations([
				'resetcity',
				'setdgshow',
				'ocJoinShow',
				'changeShop',
				'setIsGrayFilter',
			]),
			activityPopupFun(item){
				this.discountProductData = item
				this.activityPopup = true
			},
			// 瀑布流组件点击事件
			onClick(data, index, tag) {
				console.log(data);
				this.toDetail(data)
				// let direction = {
				// 	"left": '左',
				// 	"right": '右'
				// }
				// uni.showToast({
				// 	title: `${direction[tag]}侧列表第${index+1}个被点击`,
				// 	icon: 'none'
				// })
			},
			// 瀑布流组件渲染完成
			onDone() {
				// // 设置组件为 非重置，这行代码保留不删即可
				// this.waterfall[this.tabsCurrent].reset = false;
				// 恢复 getList 方法的调用
				this.ajax.load = true;
				// this.ajax.page++;
				this.waterfall[this.tabsCurrent].page++;
				console.log(this.waterfall[this.tabsCurrent].status,'设置组件状态为 等待加载,')
				// 设置组件状态为 等待加载
				this.$set(this.waterfall[this.tabsCurrent],'status','await')
				this.$set(this.waterfall[this.tabsCurrent],'reset',false)
				// 数据未渲染完成，闪屏
				this.$nextTick(()=>{
					this.isProductLoading = false
				})
				// this.waterfall.status = 'finish';
			},
			// 获取数据
			getList() {
				this.productRecommendCategorylists(this.tabsList[this.tabsCurrent]?.id ?? '')
				// if (!this.ajax.load) {
				// 	return;
				// }
				// this.ajax.load = false;
			
				// 设置状态为加载中
				// this.waterfall.status = 'loading';
				// this.waterfall.reset = true;
				// this.waterfall.status = 'success';
				// 请求数据， mockData.getList 示例一个 ajax 请求
			// 	mockData.getList({
			// 		pageNum: this.ajax.page,
			// 		pageSize: this.ajax.rows
			// 	}).then(res => {
			// 		// 获取到的数据，请注意数据结构
			// 		console.log(res);
			
			// 		// 第一页数据执行以下代码
			// 		if (this.ajax.page == 1) {
			// 			// 关闭下拉
			// 			uni.stopPullDownRefresh();
			
			// 			// 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
			// 			this.waterfall.reset = true;
			// 		}
			
			// 		// 数据无效时处理
			// 		if (!res || res.length < 1) {
			// 			// 设置组件为 加载结束 状态
			// 			this.waterfall.status = 'finish';
			// 			return;
			// 		}
			
			// 		// 将数据赋值给瀑布流 list 属性
			// 		this.waterfall.list = res;
			// 		// 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
			// 		this.waterfall.status = 'success';
			
			// 		/**
			// 		 * 下方的代码为扩展其他功能的示例代码 可做参考，不需要可删除
			// 		 * */
			
			// 		// 缓存当前数据给其他需要该数据的功能使用
			// 		if (this.ajax.page == 1) {
			// 			this.ajax.dataList = res;
			// 		} else {
			// 			this.ajax.dataList = [...this.ajax.dataList, ...res];
			// 		}
			// 		// 记录本次数据长度，意义请看 done 事件的回调
			// 		this.ajax.dataCount = res.length || 0;
			
			// 		// 。。。下面不需要写代码了，等待组件渲染完成
			// 	})
			},
			getConfigDataDetail() {
				let params = {
					page_type: 'index'
				}
				uni.$u.api.getConfigDataDetail(params).then(res => {
					let Detail = res.data
					this.share.title = Detail.content
					this.share.imageUrl = Detail.image
				})
			},
			getTabsBoxInitialOffsetTop() {
				this.$nextTick(() => {
					setTimeout(() => {
						// u-search导航
						uni.createSelectorQuery()
							.in(this)
							.select(".index-scoll-search")
							.boundingClientRect((res) => {
								// diy父元素目标元素
								this.$nextTick(()=>{
									uni.createSelectorQuery()
									.in(this)
									.select(".index-scroll-view")
									.boundingClientRect((data) => {									
											this.tabsBoxInitialOffsetTop = data.height + res.height + 10
									}).exec();
								})
							}).exec();
					// 时间短上面的元素未加载完，获取data.top存在问题（可能数值有点小）
					}, 800);
				});
				
			},
			getElementTop() {
				this.$nextTick(() => {
					setTimeout(() => {
						// let BarHeight = uni.getSystemInfoSync().statusBarHeight
						const query = uni.createSelectorQuery().in(this);
						query.select('.navTop').boundingClientRect((e) => {
							this.navTopHeight = e.height
						}).exec();

						setTimeout(() => {
							query.select('.tabsBox').boundingClientRect((e) => {
								this.tabStikTop = e.top - this.navTopHeight
							}).exec()
						}, 20);
					}, 800);
				});

			},
			getOrderCart() {
				uni.$u.api.getOrderCart().then(res => {
					let cartList = res.productList;
					let TabBarIOndex = cartList[0] ? cartList[0].productList.length : 0
					if (cartList && TabBarIOndex > 0) {
						uni.setTabBarBadge({
							index: 2,
							text: JSON.stringify(TabBarIOndex)
						})
					}
				})
			},
			onShowNewCustom() {
				this.showNewCustom = false
				let getAdvertisement = uni.getStorageSync('advertisement')
				if (this.advertisementList && this.advertisementList.length > 0 && getAdvertisement && !this.joinShow && !this.showNewCustom) {
					this.advertisement = true
					uni.setStorageSync('advertisement', false)
				}
			},
			onJoinShow() {
				if (this.vuex_showdg == 0 && this.newCouponLists.length > 0 && !this.joinShow) {
					this.showNewCustom = true
					this.$store.commit('setdgshow');
				}
			},
			onAdvertisement() {
				this.advertisement = false
			},

			advertisementPage(e) {
				this.jump(this.advertisementList[e].link_url);
			},
			getAdIndexFun() {
				let params = {
					type: 'index'
				}
				let getAdvertisement = uni.getStorageSync('advertisement')
				uni.$u.api.getAdIndex(params).then(res => {
					this.advertisementList = res.list
					// 存在新人弹窗
					// if (this.advertisementList && this.advertisementList.length > 0 && getAdvertisement && !this.joinShow && !this.showNewCustom) {
					// 	this.advertisement = true
					// 	uni.setStorageSync('advertisement', false)
					// }
					// 不存在新人弹窗 弹广告
					if (this.advertisementList && this.advertisementList.length > 0 && getAdvertisement && !this.joinShow) {
						this.advertisement = true
						uni.setStorageSync('advertisement', false)
					}
				})
			},
			getLocation() {
				console.log('getlocation')
				let temp_province = this.maplocation.province;
				let temp_city = this.maplocation.city;
				let temp_mapid = this.vuex_mapid;
				let vuex_lng = this.vuex_lng?this.vuex_lng:'';
				let vuex_lat = this.vuex_lat?this.vuex_lat:'';
				uni.$u.api.getCity({
					province: temp_province,
					city: temp_city,
					usaddrid: temp_mapid,
					lng: vuex_lng,
					lat: vuex_lat
				}).then(res => {
					this.businesshoursCity = res
					this.showHttps();
				})

			},
			// 处理小程序码参数
			getScene(scene) {
				let scene_new = decodeURIComponent(scene);
				let info = {};
				var list = scene_new.split("&");
				for (var i = 0; i < list.length; i++) {
					info[list[i].split(":")[0]] = list[i].split(":")[1];
				}
				return info;
			},
			handleSwiper(e) {
				this.jump(this.bannerList[e].link);
			},
			handleCoupon(index) {
				this.$set(this.couponList[index],'is_receive',true);
				// if(!item.is_receive){
				// 	uni.$u.api.postCoupon({
				// 		coupon_id: item.coupon_id
				// 	}).then(res => {
				// 		item.is_receive = true;
				// 		uni.showToast({
				// 			title: "领取成功"
				// 		})
				// 	})
				// }
			},
			toDetail(item) {
				// console.log('item',item)
				if (item.activity_type == "discount") {
					this.jump('/pages/categoty/product/product_limited?id=' + item.product_id)
				} else if (item.categorydetail.type == 1) {
					this.jump('/pages/categoty/product/product_no_cart?id=' + item.product_id)
				} else {
					this.jump('/pages/categoty/product/product?id=' + item.product_id)
				}
			},
			jump(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			gojump(url) {
				if (url == "#") {
					uni.showToast({
						icon: 'none',
						title: "近期上线，敬请期待"
					})
				} else if (url == "") {
					console.log("empty")
				} else {
					this.jump(url)
				}
			},
			tabsChange(e) {
				// 瀑布流
				this.cacheDatalist();
				this.tabsCurrent = e;
				this.isProductLoading = true
				console.log(e, 'tabchange',this.tabsBoxInitialOffsetTop)
				if (this.isRecommendTabBarScroll) {
					uni.pageScrollTo({
						duration: 300,
						scrollTop: this.tabsBoxInitialOffsetTop
					});
				}
				if(this.cacheDate[e]){
					let dddata = this.cacheDate[e];
					this.$set(this.waterfall,[e],JSON.parse(JSON.stringify(dddata)))
					this.$set(this.waterfall[e],'status','success')
				}
				// this.isResetNow = true
				// setTimeout(()=>{this.isResetNow = false},3000)
				// this.productReset()
				this.productRecommendCategorylists(this.tabsList[e].id)
				// 非瀑布流  
				// this.tabsCurrent = e;
				// console.log(e, 'tabchange')
				// // console.log(this.tabsList[e].id)
				// this.isResetNow = true
				// setTimeout(()=>{this.isResetNow = false},3000)
				// // this.productReset()
				// if(this.tabsList[e]){
				// 	this.productRecommendCategorylists(this.tabsList[e].id)
				// }else{
				// 	this.productList = [];
				// }
			},
			cacheDatalist(){
				// 瀑布流
				//切换后会执行一次渲染，导致page加一，所以这里要减一
				let edpage = this.waterfall[this.tabsCurrent].page;
				this.cacheDate[this.tabsCurrent].page = edpage-1;
			},
			getBanner() {
				uni.$u.api.getConfigData({
					type: 'banner'
				}).then(res => {
					this.bannerList = res.list;
				})
			},
			getNotice() {
				uni.$u.api.getConfigData({
					type: 'notice'
				}).then(res => {
					this.noticeList = res.list;
				})
			},
			getSeckillActive() {
				uni.$u.api.getSeckillActive().then(res => {
					if (res.list.length > 0) {
						uni.$u.api.getSeckillProduct({
							seckill_activity_id: res.list[0].seckill_activity_id
						}).then(res => {
							this.seckillProduct = res.list;
							this.seckillTop = res.detail;
							// console.log(this.seckillProduct,'-------------111-----------')
							// console.log(this.seckillTop,'========================')
						})
					}else{
						this.seckillProduct = [];
						this.seckillTop = {};
					}
				})
			},
			getAssembleActive() {
				uni.$u.api.getAssembleActive().then(res => {
					if (res.list.length > 0) {
						uni.$u.api.getAssembleProduct({
							assemble_activity_id: res.list[0].assemble_activity_id
						}).then(res => {
							this.assembleProduct = res.list;
							this.assembleTop = res.detail;
							// console.log(this.assembleTop,'-------------33333-----------')
						})
					}else{
						this.assembleProduct = [];
						this.assembleTop = {};
					}
				})
			},
			getBargainActive() {
				uni.$u.api.getBargainActive().then(res => {
					if (res.list.length > 0) {
						uni.$u.api.getBargainProduct({
							bargain_activity_id: res.list[0].bargain_activity_id
						}).then(res => {
							this.bargainProduct = res?.list ?? [];
							this.bargainTop = res?.detail ?? {}
						})
					}
				})
			},
			getCouponList() {
				uni.$u.api.getCouponList({
					limit: 100
				}).then(res => {
					this.couponList = res;
					// console.log(res,'this.couponListthis  .  couponListthis.couponList')
				})
			},
			async getNewcomerCouponList() {
				return new Promise((resolve, reject) => {
					uni.$u.api.getNewcomerCouponList({
						limit: 100
					}).then(async (res) => {
						this.newCouponLists = res;
						this.newCouponLists = this.newCouponLists.filter(item=>item['is_receive']==false)
						resolve('ok');
					}).catch(ex => {
						console.log(ex)
						reject(ex)
					});
				})
			},
			getNewCustomGoodsList() {
				let token = uni.getStorageSync('token')
				uni.$u.api.getNewcomerProductLists(this.newProPageForm).then(res => {
					this.newCustomGoods = res.list.data;
				})
				// uni.$u.api.getNewCustomGoodsList({
				// 	app_id:10001,
				// 	token:token,
				// }).then(res=>{
				// 	console.log(res,'goodlist')
				// 	this.newCustomGoods = res.list.data
				// })
			},
			getBrand() {
				uni.$u.api.getBrand().then(res => {
					this.brandList = res.list;
				})
			},
			// getProduct() {
			// 	uni.$u.api.getProduct(this.productPageForm).then(res => {
			// 		this.productList = res.data;
			// 	})
			// },
			async getUserInfo() {
				return new Promise((resolve, reject) => {
					let self = this
					uni.$u.api.userInfo().then(async function(res){
						console.log(self.vuex_showdg,'self.vuex_showdg')
						self.userInfo = res;
						//加载新人商品+优惠卷
						if(self.userInfo.newPeople){
							console.log('新人新人新人新人新人新人新人新人新人新人新人新人新人新人');
							await self.getNewcomerCouponList()
							self.getNewCustomGoodsList()
							self.showNewCustomArea = true
							//弹窗-每打开一次小程序弹一次
							console.log(self.newCouponLists,'self.newCouponLists')
							if(self.vuex_showdg==0&&self.newCouponLists.length>0 && !self.joinShow){
								self.showNewCustom = true
								self.$store.commit('setdgshow');
							}
							resolve('ok');
						}else{
							resolve('ok');
						}
					}).catch(ex => {
						console.log(ex)
						reject(ex)
					});
				})
			},
			getJoinText() {
				uni.$u.api.getConfigSys({
					type: 'txt'
				}).then(res => {
					this.joinmsg.joinimg = res.list.join_img;
					this.joinmsg.jointext = res.list.join_text;
					this.joinmsg.joinphone = res.list.join_phone;
				})
			},
			async getCityNode() {
				// return new Promise((resolve, reject) => {
				let temp_province = this.maplocation.province;
				let temp_city = this.maplocation.city;
				let self = this;
				let vuex_lng = this.vuex_lng?this.vuex_lng:'';
				let vuex_lat = this.vuex_lat?this.vuex_lat:'';
				uni.$u.api.getCityStore({
					province: temp_province,
					city: temp_city,
					lng: vuex_lng,
					lat: vuex_lat
				}).then(async function(res) {
					console.log('cityStore');
					// 页面图标/首页置灰 待改
					const { page_data = {} } = res
					self.setPageTab(page_data, 1)
					if (res.getstore == 0) {
						console.log('no city store')
						// reject('no store')
						self.$store.commit('resetcity');
						self.joinShow = true;
						self.getLocation()
					} else {
						console.log('have city store')
						self.getLocation()
						// resolve('suc');
					}
				})
				// });
			},
			getCityBusiness() {
				let self = this;
				uni.$u.api.getCityBusiness({}).then(function(res) {
					self.checkbusiness = res.checkbusiness
					self.businesstxt = res.businesstxt
					
				})
			},
			callme() {
				let phone = this.joinmsg.joinphone
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			async showHttps() {
				this.getCityBusiness();
				let thisShopid = 0
				if(this.businesshoursCity.supplier&&this.businesshoursCity.supplier.shop_supplier_id){
					thisShopid = this.businesshoursCity.supplier.shop_supplier_id
				}
				
				let self = this
				if(thisShopid!=this.vuex_shopid||self.items.length==0){
					console.log()
					this.$store.commit('changeShop',thisShopid);
					
					console.log('将执行获取首页装修的函数')
					uni.$u.api.getIndex().then((res) => {
					    console.log(res, '装修信息')
					    self.items = Object.values(res.items); // 将对象转换为数组
					})
				}
				setTimeout(() => {
					this.loading = false
				}, 30);
				
				this.getJoinText();
				// this.getBanner();
				this.getNotice();
				this.getSeckillActive();
				this.getAssembleActive();
				this.getBargainActive();
				this.getCouponList();
				this.getBrand();
				await this.getUserInfo();
				console.log("next===========")
				// this.getProduct();
				this.getRecommendList(true);
				this.getOrderCart()
				this.getAdIndexFun()
				// this.getList();
				// 更新优惠券
				// uni.$emit('updataCoupon', true)
				// let self = this
				// console.log('将执行获取首页装修的函数')
				// uni.$u.api.getIndex().then((res) => {
				//    console.log(res, '装修信息')
				//    self.items = Object.values(res.items); // 将对象转换为数组
					
					// this.getCouponList();
				    // uni.$u.api.getCoupon({
				    //     page: 1,
				    //     list_rows: 30,
				    // }).then(res => {
				    //     self.couponList = res.list;
				    //     console.log(self.items, "self.items")
				    //     // 在这里确保 self.items 已经被正确赋值
				    //     if (self.items) {
				    //         self.items.map(item => {
				    //             console.log(item, 'item')
								// if(item["type"]=="coupon"){
								// 	item["data"] = res.list
								// 	console.log('找到优惠券组',item)
								// }
								// return item
				    //         })
				    //     }
				    // })
				//})
				// uni.$u.api.getIndex().then((res) => {
				// 	console.log(res, '装修信息')
				// 	self.items = res.items
				// 	uni.$u.api.getCoupon({
				// 		limit: 100
				// 	}).then(res => {
				// 		self.couponList = res.list;						
				// 		console.log(self.items,"self.items")
				// 		self.items.map(item=>{
				// 			console.log(item,'item')
				// 			// if(item["type"]=="coupon"){
				// 			// 	item["data"] = res.list
				// 			// 	console.log('找到优惠券组',item)
				// 			// }
				// 			// return item
				// 		})
				// 	})
				// })
			},
			getRecommendList(isFirst) {
				uni.$u.api.productRecommendList().then(res => {
					console.log(res, 'productRecommendList')
					this.tabsList = res.list
					if(this.tabsList[this.tabsCurrent]){
						this.productRecommendCategorylists(this.tabsList[this.tabsCurrent]['id'])
					}else{
						this.productList = [];
					}
				})
			},
			productReset(){
				// this.ajax.load = true
				// this.ajax.page = 1
				// this.ajax.dataList = []
				// // this.ajax = {
				// // 	// 是否可以加载
				// // 	load: true,
				// // 	// 每页的请求条件
				// // 	rows: 6,
				// // 	// 页码
				// // 	page: 1,
				// // 	// 数据列表
				// // 	dataList: []
				// // }
				this.cacheDate = [];
				this.waterfall = [{
						status: "",
						reset: true,
						list: [],
						page:1,
					}];
				// this.productList = [];
				// console.log("reset ====================")
			},
			productRecommendCategorylists(module_id) {
				console.log("inside product Recommend Categorylists")
				// 没有推荐列表
				//if (!module_id) {
				//	this.productList = []
				//	this.waterfall.status = 'empty'
				//	return
				//}
				// 非瀑布流
				// uni.$u.api.productRecommendCategorylists({
				// 	module_id: module_id,
				// 	list_rows: 60
				// }).then(res => {
				// 	if (res['length'] == 0) {
				// 		this.productList = []
				// 	} else {
				// 		if(JSON.stringify(res.list.data)!=JSON.stringify(this.productList)){
				// 			this.productList = [];
				// 			this.productList = res.list.data
				// 		}
				// 	}
				// })
				// ===瀑布流===
				let tabsCurrent = this.tabsCurrent
				if(this.waterfall[tabsCurrent]){
					if(this.waterfall[tabsCurrent].status=='finish'||this.waterfall[tabsCurrent].status=='success'||this.waterfall[tabsCurrent].status=='loading'||this.waterfall[tabsCurrent].status == 'empty'){
						console.log(this.waterfall[tabsCurrent],'--this.waterfall[tabsCurrent].status--')
						return 
					}
				}else{
					this.$set(this.waterfall,[tabsCurrent],{page:1,
						list:[],
						status:''})
				}
				// console.log(this.waterfall[tabsCurrent].page)
				// this.ajax.load = false;
				this.$set(this.waterfall[tabsCurrent],'status','loading')
				uni.$u.api.productRecommendCategorylists({
					module_id: module_id,
					list_rows: this.ajax.rows,
					page: this.waterfall[tabsCurrent].page
				}).then(res => {
					console.log(res,'resres')
					if(res['length']==0){
						console.log('没有货')
						this.isProductLoading = false
						// this.productList = []
						this.waterfall[tabsCurrent].status = 'empty'
						this.waterfall[tabsCurrent].reset = true
						this.$set(this.cacheDate,[tabsCurrent],{
							page:1,
							list:[],
						})
						return;
					}
					if (res.list.data['length'] == 0) {
						this.isProductLoading = false
						this.waterfall[tabsCurrent].status = 'finish'
					} else {
						if(this.waterfall[tabsCurrent].page>res.list.current_page){
							this.waterfall[tabsCurrent].status = 'finish'
						}else{
							this.waterfall[tabsCurrent].list = [
								...res.list.data
							];
							if(this.cacheDate[tabsCurrent]){
								this.cacheDate[tabsCurrent].list = this.cacheDate[tabsCurrent].list.concat(res.list.data);
							}else{
								this.cacheDate[tabsCurrent] = {};
								this.cacheDate[tabsCurrent].list = JSON.parse(JSON.stringify(res.list.data))
							}
							this.$set(this.waterfall[tabsCurrent],'status','success')
							console.log(this.cacheDate[tabsCurrent])
							// this.waterfall[tabsCurrent].status = 'success';
						}
					}
				})
			},
			async checkUser() {
				return new Promise(async(resolve, reject)=>{
					uni.$u.api.checkUserLoginToken().then(async(res)=>{
						resolve('ok')
						// console.log('check login now ------------>>----------->>')
					}).catch(async(er)=>{
						// console('er')
						reject(error)
					})
				})
			},
			async getHttp() {
				await this.checkUser()
				this.getCityNode()
			},
			handleShowNewCustom(value) {
				this.showNewCustom = value
				this.newCouponLists = []

				let getAdvertisement = uni.getStorageSync('advertisement')
				if (this.advertisementList && this.advertisementList.length > 0 && getAdvertisement && !this.joinShow && !this.showNewCustom) {
					this.advertisement = true
					uni.setStorageSync('advertisement', false)
				}
			},
			quantityDiscount(rebate_json){
				if(Array.isArray(rebate_json) && rebate_json.length>0){
					let formattedString = rebate_json.map(item => {  
						let discounts = (parseFloat(item.rebate) / 10).toFixed(1);
						let DisNumber = discounts.substring(0, discounts.indexOf('.'));
						let point = discounts.substring(discounts.indexOf('.') + 1,discounts.indexOf('.') + 2);
						let discount = DisNumber+(point>0?'.'+point:'');
						return `${item.num}件${discount}折`;  
					}).join(' '); 
				return formattedString
				}
			},
			arrEuqalse(arr1, arr2) {
				if (!arr1 || !arr2) {
					return false;
				}
				if (arr1.length != arr2.length) {
					console.log("11111111111111111111111111111")
					return false;
				}
				for (var i = 0; i < arr2.length; i++) {
					if (arr1.indexOf(arr2[i]) == -1) {
						console.log(arr2[i])
						console.log(arr1[i])
						console.log("22222222222222222222222222222")
						
						return false;
					}
				}
				for (var i = 0; i < arr1.length; i++) {
					if (arr2.indexOf(arr1[i]) == -1) {
						console.log("333333333333333333333333333333")
						return false;
					}
				}
				return true;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;
		
		.m-top{
			// margin-top: 20rpx;
			// padding-bottom: 20rpx;
		}
		
		.load-txt {
			width: 100%;
			display: flex;
			justify-content: center;
			padding: 20rpx 0 20rpx 0;
			// text-align: center;
			color: #999;
			font-size: 24rpx;
		}
		
		.load-icon {
			width: 300rpx;
			height: 300rpx;
			margin: 0 auto 20rpx auto;
			display: block;
		}
		
		.status-change {
			position: fixed;
			right: 10rpx;
			top: 60%;
			width: 80rpx;
			height: 80rpx;
			z-index: 100;
			font-size: 24rpx;
			border-radius: 50%;
			background-color: #0089ff;
			color: #fff;
			line-height: 1;
			opacity: .33;
		
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			align-content: center;
		}
		

		.products-box {
			height: 100%;
			width: 65vw;
			padding: 12rpx 0 14rpx 30rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		

		.swiper {
			// margin-top: 20rpx;
		}

		// .notice {
		// 	margin-top: 20rpx;
		// 	// height: 64rpx;
		// 	// padding: 8rpx 12rpx;
		// 	border-radius: 100rpx;

		// 	swiper {
		// 		height: 100%;
		// 	}

		// 	.notice-item {

		// 		.notice-item-image {
		// 			width: 48rpx;
		// 			height: 48rpx;
		// 			border-radius: 48rpx;
		// 			margin-right: 8rpx;
		// 			font-size: 24rpx;
		// 			color: #666666;
		// 		}

		// 		.notice-img {
		// 			width: 100%;
		// 			max-height: 120rpx;
		// 		}

		// 		.notice-item-name {
		// 			width: 600rpx;
		// 		}
		// 	}
		// }

		.active {
			margin-top: 20rpx;

			.active-item {
				border-radius: 16rpx;
				width: 332rpx;
				height: 254rpx;

				.active-item-title {
					padding: 12rpx 22rpx 22rpx;
					font-size: 28rpx;
					color: #111111;
					font-weight: bold;
				}

				.active-item-product {
					padding: 0 0 22rpx 0;

					.active-item-seckill {
						// flex: 1;
						width: 49%;
					}

					// .active-item-product-image {
					// 	width: 108rpx;
					// 	height: 108rpx;
					// }

					.active-item-product-price {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #ffffff;
						width: 136rpx;
						height: 48rpx;
						padding-left: 25rpx;
					}

					.active-item-assemb {
						// flex: 1;
						width: 49%;
					}

					.active-item-product-name {
						font-size: 24rpx;
						color: #9E9E9E;
						margin-top: 20rpx;
						width: 120rpx;
					}
				}
			}
		}

		// .coupon {
		// 	margin-top: 22rpx;
		// 	border-radius: 16rpx;
		// 	padding: 16rpx 20rpx;

		// 	.coupon-list {
		// 		// flex: 1;

		// 		.coupon-item {
		// 			display: inline-block;
		// 			margin-right: 20rpx;

		// 			image {
		// 				width: 193rpx;
		// 				height: 112rpx;
		// 			}
		// 		}
		// 	}
		// }

		.brand {
			margin-top: 22rpx;
			padding: 26rpx 20rpx;
			border-radius: 16rpx;

			.brand-title {

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}

				.brand-title-text {
					font-size: 28rpx;
					color: #111111;
					font-weight: bold;
				}

				.brand-title-more {
					font-size: 24rpx;
					color: #666666;
				}
			}

			.brand-list {
				font-size: 24rpx;
				color: #111111;

				.brand-item {
					width: 20%;
					text-align: center;
					margin-top: 20rpx;
					margin-bottom: 15rpx;

					.brand-list-image {
						// width: 84rpx;
						max-width: 104rpx;
						max-height: 104rpx;
						margin-bottom: 10rpx;
						// border-radius: 50%;
					}
				}
			}
		}

		.product {
			// margin-top: 20rpx;

			.tabStik {
				background-color: #fff;
				// z-index: 9999;
				position: sticky;
				margin: 0 -30rpx;
				padding: 0 30rpx;
				z-index: 95;
			}

			.product-list {
				// padding-bottom: 30rpx;
				// // 瀑布流要求去掉
				// margin-top: 28rpx;

				.product-item {
					width: 334rpx;
					border-radius: 16rpx;
					position: relative;
					// // 瀑布流要求去掉
					// margin-bottom: 24rpx;
				}

				.product-label {
					background: #BB0024;
					padding: 0rpx 10rpx 2rpx 10rpx;
					color: #fff;
					font-size: 12px;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}
				.pentagonBox {
					width: 100%;
					display: flex;
					justify-content: space-between;
					.pentagonImage {
						width: 80rpx;
						height: 80rpx;
						margin-left: -100rpx;
					}
					.pentagon {
						width: 80rpx;
						height: 80rpx;
						background-color: #fde9eb;
						clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0% 100%, 0% 38%);
						transform: rotate(90deg);
						display: flex;
						justify-content: center;
						align-items: center;
						.pentagonTxt {
							width: 40rpx;
							transform: rotate(-90deg);
							font-size: 16rpx;
							color: #bb0024;

						}
					}
				}
	
				

				.product-item-image {
					width: 334rpx;
					height: 328rpx;
					border-radius: 16rpx 16rpx 0 0;
				}

				.mark-at-top {
					position: absolute;
					z-index: 80;
					width: 120rpx;
					// height: 100rpx;
				}

				.product-con {
					padding: 12rpx 20rpx 18rpx;

					.product-con-name {
						font-size: 26rpx;
						color: #111111;
						font-weight: bold;
						margin-bottom: 14rpx;
						min-height: 68rpx;
					}

					.product-con-price {

						view {
							font-size: 32rpx;
							font-weight: bold;
							color: $uni-color-theme;

							text {
								color: $uni-color-theme;
								font-size: 24rpx;
								text-decoration: none;
							}
						}

						text {
							font-size: 22rpx;
							text-decoration: line-through;
							color: #CCCCCC;
						}
					}
				}
				.seckill-activity {
						font-size: 24rpx;
						padding: 0 4rpx;
						margin: 10rpx 0;
						color: #bb0024;
						display: flex;
						align-items: center;
						border-radius: 8rpx;
						border: 1px solid #bb0024;
						display: inline-block;
					.seckill-activity-txt {
						border: 1px solid #bb0024;
						border-radius: 50%;
						font-size: 18rpx;
						width: 26rpx;
						height: 26rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 6rpx;
						display: inline-block;
						text-align: center;
						transform: scale(0.8);
					}
					.seckill-activity-ele {
						display: inline-block;
						padding: 0 4rpx;
						background-image: linear-gradient(to right, #bb0024, #fa0032);
						color: #fff;
						margin:0 10rpx 0 -4rpx;
						border-radius: 8rpx 0 8rpx 8rpx;
					}
				}
			}
		}
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			color: transparent;
		}

		// /deep/.u-mode-center-box{
		// 	background-color: transparent !important;
		// 	position: relative;
		// 	max-width: 80%;
		// 	max-height: 80%;
		// 	overflow-y: visible;
		// }
.navTop {
	margin: 0 -30rpx;
	z-index: 9999;
	position: sticky;
	top: 0;
}

.navbar-bglist-z {
	z-index: 99999;
}
.navbar-bglist {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.navbar-rightside {
	display: flex;
	flex-direction: column;
	margin-left: 10rpx;
}

.navbar-txt {
	font-size: 24rpx;
	line-height: 48rpx;
	color: #fff;
	font-weight: bold;
	display: flex;

	.nav-in-txt {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200rpx;
	}

	.nav-in-icon {
		margin-left: 8rpx;
		transform: rotate(90deg);
	}
}

.navbar-time {
	font-size: 22rpx;
	line-height: 35rpx;
	color: #e3e3e3;
	font-family: Arial, Helvetica, sans-serif;

	.nav-in-txt {
		// padding-left:15rpx;
	}
}

.logo {
	height: 55rpx;
	margin-left: 15rpx;
}

	}
.img-popup-top {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40rpx 20rpx;
	width: 550rpx;
	position: relative;

	.img-center {
		width: 180rpx;
		display: block;
		margin: 10rpx 0 20rpx 0;
	}

	.img-pp-txt {
		font-size: 28rpx;
		line-height: 60rpx;
	}

	.img-pp-btn {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
}
.notice-popup {
	padding: 30rpx;
	width: 620rpx;

	.notice-title {
		margin-bottom: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}

	textarea {
		flex: 1;
	}
}
.popup-box {
	/deep/.u-mode-center-box {
		background: transparent !important;
	}

	.advertisement-popup {
		background: transparent;

		.advertisement-swiper {
			width: 100%;
			height: 800rpx;
			position: relative;

			/deep/ .u-swiper-indicator {
				// bottom:-10px !important;
				.u-indicator-item-round {
					// background-color: rgba(255, 255, 255, 0.9);
				}
			}

			.advertisement-txt {
				font-size: 20rpx;
				padding: 0rpx 10rpx;
				border-radius: 10rpx 10rpx 0rpx 24rpx;
				color: #fff;
				position: absolute;
				left: 0;
				bottom: 0;
				background-color: rgba(255, 255, 255, 0.2);
			}
		}

		.advertisement-close {
			margin-top: 50rpx;
			text-align: center;

			.advertisement-image {
				border-radius: 50%;
				border: 2px solid #fff;
				width: 40rpx;
				height: 40rpx;
			}

		}
	}
}
.is_gray {
	filter: grayscale(100%);
}
.popup-service {

.popup-service-title {
	font-size: 36rpx;
	border-bottom: 20rpx solid #F6F6F6;
	text-align: center;
	padding: 34rpx 0;
}
.popup-service-txt {
		font-size: 24rpx;
		color: #E80D0D;
		padding:0 20rpx;
	}

.popup-service-list {
	padding: 20rpx;

	.popup-service-list-title {
		font-size: 24rpx;
		color: #111111;
		// text-align: center;
		margin-bottom: 36rpx;
	}
	
	.popup-service-item {
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		background: #F6F6F6;
		padding: 26rpx 22rpx;

		.popup-service-image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 5rpx;
		}

		.popup-service-name {
			font-size: 28rpx;
			color: #111111;
		}

		.popup-service-describe {
			font-size: 20rpx;
			color: #999999;
			margin-top: 10rpx;
		}
	}
	.product-item {
		margin-bottom: 100rpx;

		.product-item-image {
			width: 128rpx;
			height: 128rpx;
		}

		.product-item-con {
			margin-left: 16rpx;
			flex: 1;

			.product-item-name {
				width: 460rpx;
				font-size: 28rpx;
				color: #111111;
			}

			.product-item-suk {
				font-size: 24rpx;
				color: #999999;
			}

			.product-item-num {
				font-size: 24rpx;
				color: #999999;
			}

			.product-item-price {
				font-size: 28rpx;
				color: $uni-color-theme;
			}
		}
	}
}
}
</style>